<template>
	<view class="page" v-if="JSON.stringify(orderInfo)!='{}'">
		<!-- 订单状态 star -->
		<view class="order_state" @tap="bindOrderStatus(orderInfo.num, orderInfo.course_count, orderInfo.course_order_id)">
			<view
				v-if="orderInfo.status == 0 || orderInfo.status == 1 || orderInfo.status == 3 || orderInfo.status == 5 || orderInfo.status == 6"
				:class="[
					'order_state_text',
					'f_40',
					orderInfo.status == 1 ? 'orange' : '',
					orderInfo.status == 0 ? 'gery1' : '',
					orderInfo.status == 3 || orderInfo.status == 6 ? 'navy_blue' : ''
				]"
			>
				<block v-if="orderInfo.status == 1">订单待支付</block>
				<!-- <block v-else-if="orderInfo.status == 3">{{ orderInfo.is_comment == 1 ? '订单已完成' : '待评价' }}</block> -->
				<block v-else-if="orderInfo.status == 3">订单已完成</block>
				<block v-else-if="orderInfo.status == 0">取消支付</block>
				<block v-else-if="orderInfo.status == 5">拒绝退款</block>
				<block v-else-if="orderInfo.status == 6">订单已退款</block>
			</view>
			<block v-else>
				<view class="order_state_title dis-flex flex-y-center">
					<text :class="['order_state_text', 'f_40', orderInfo.status == 2 ? 'purple' : 'navy_blue']">
						<block v-if="orderInfo.status == 2"><text>课程进行中</text></block>
						<block v-else-if="orderInfo.status == 4">订单申请退款中</block>
					</text>
					<image class="icon" :src="imgPrefix('/static/image/icon/next.png')"></image>
				</view>
			</block>
		</view>

		<!-- 课程信息 star -->
		<view class="block_view">
			<view class="block_title">课程信息</view>
			<view class="course_info">
				<image class="course_img" :src="orderInfo.user!=null?orderInfo.user.avatar:imgPrefix('/static/image/icon/default_avatar.png')"></image>
				<view class="course_con_info onelist-hidden">
					<view class="course_name f_32 onelist-hidden">{{ orderInfo.user.nickname!=''?orderInfo.user.nickname:orderInfo.user.mobile}}</view>
					<view class="teacher_year f_24 gery1 onelist-hidden">
						<text class="course_num gery1 f_24">
							共计
							<text class="navy_blue">{{ orderInfo.num }}</text>
							课次 <text class="dot"> · </text>
							<text class="navy_blue">{{ orderInfo.hour }}</text>
							 课时
						</text>
					</view>
				</view>
			</view>
			<view class="block_list">
				<view class="list_item">
					<view class="item_left gery1">课程语种</view>
					<view class="item_right">{{orderInfo.language}}</view>
				</view>
				<view class="list_item">
					<view class="item_left gery1">授课方式</view>
					<view class="item_right">{{ orderInfo.classdata == 1 ? '教师上门' : '学生上门' }}</view>
				</view>
			</view>
		</view>
		<view class="address-box" v-if="orderInfo.classdata == 1&&orderInfo.status !=1">
			<image class="bg" :src="imgPrefix('/static/image/teacher/teacher_order_bg.png')" mode=""></image>
			<view class="address">
				<view class="violet1 f_32 title">上课位置</view>
				<view class="dis-flex flex-y-center box">
					<view class=""><image :src="imgPrefix('/static/image/teacher/order_address_icon.png')"></image></view>
					<view class="address_info f_24">
						<view class="onelist-hidden">{{orderInfo.address}}</view>
						<view class="username">
							<text>{{orderInfo.username}}</text>
							<text>{{orderInfo.phone}}</text>
						</view>
					</view>
					<view class="f_24 violet1 dis-flex flex-y-center" @tap.stop="address2Location(orderInfo.address)">
						<text>导航</text>
						<image :src="imgPrefix('/static/image/icon/address_next.png')"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 课价信息 star -->
		<view class="block_view">
			<view class="block_title">课价信息</view>
			<view class="block_list">
				<view class="list_item">
					<view class="item_left gery1">课程单价</view>
					<view class="item_right">
						<text class="orange">￥{{ orderInfo.price }}</text>
						<text class="navy_blue">/{{ orderInfo.hour == 1 ? '' : orderInfo.hour }}小时</text>
					</view>
				</view>
				<view class="list_item">
					<view class="item_left gery1">课次课时</view>
					<view class="item_right navy_blue">{{ orderInfo.num }}次/{{ orderInfo.hour == 1 ? '' : orderInfo.hour }}小时</view>
				</view>
				<view class="list_item">
					<view class="item_left gery1">总课时长</view>
					<view class="item_right navy_blue">{{ orderInfo.total_hour }}小时</view>
				</view>
			</view>
			<view class="block_bottom dis-flex flex-x-end">
				<view class="navy_blue">
					<text class="f_28">合计：</text>
					<text class="f_40 orange">¥{{ orderInfo.total_price }}</text>
				</view>
			</view>
		</view>

		<!-- 订单信息 star -->
		<view class="block_view">
			<view class="block_title">订单信息</view>
			<view class="block_list">
				<view class="list_item">
					<view class="item_left gery1">订单编号</view>
					<view class="item_right">
						<text selectable class="navy_blue">{{ orderInfo.order_no }}</text>
						<text @tap="bindCopy(orderInfo.order_no)" class="copy">复制</text>
					</view>
				</view>
				<view class="list_item">
					<view class="item_left gery1">订单时间</view>
					<view class="item_right navy_blue">{{ orderInfo.createtime }}</view>
				</view>
			</view>
		</view>

		<!-- 意向上课时间 star -->
		<view class="block_view">
			<view v-if="courseList.length>0" class="block_title">意向上课时间</view>
			<view v-if="courseList.length>0" :class="courseList.length>0?'block_list_view':''">
				<view class="time_list" :style="{ height: courseList.length>=5&&!isShowMore ? timeHeight[isShowMore ? 1 : 0] : 'unset' }">
					<view class="time_item navy_blue" v-for="(itemq, indeq) in courseList" :key="indeq">
						<text>{{ itemq.date }}/{{ itemq.week }} {{ itemq.time }}</text>
					</view>
				</view>
				<view v-show="courseList.length>=5" class="get_more f-c-9" @tap.stop="bindShowMore">{{ isShowMore ? '收起' : '查看全部' }}</view>
			</view>
			<view :class="['content_list',courseList.length>0?'m-t-24':'']">
				<view class="content_item">
					<image class="icon" :src="imgPrefix('/static/image/teacher/order_contact_icon.png')"></image>
					<text>联系客服</text>
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn" open-type="contact">客服</button>
					<!-- #endif -->
				</view>
				<!-- 学生未支付的时候不要显示学生信息 -->
				<view class="content_item" @tap="bindConcat" v-if="orderInfo.status !=1">
					<image class="icon" :src="imgPrefix('/static/image/teacher/class_time_detail_contact.png')"></image>
					<text>联系学生</text>
				</view>
			</view>
		</view>
		<view class="is_bottom">到底了~</view>
		<zan-popup :show="showCourse" type="bottom" @close="closeCoursePopup">
			<view class="schedule-list-box">
				<view class="title t-c f_32">
					课程进度
					<image @click="closeCoursePopup" :src="imgPrefix('/static/image/icon/address_close.png')"></image>
				</view>
				<scroll-view scroll-y="true" class="scroll_view">
				<view
					v-for="(item, index) in scheduleList"
					:key="index"
					:class="['item', 'dis-flex', 'flex-x-between', 'f_26', item.status == 3 || orderInfo.course_count == 0 ? 'color0' : item.status == 1 ? 'gery1' : 'navy_blue']"
				>
					<view class="dis-flex flex-x-between status-box flex-y-center">
						<text :class="['li', orderInfo.course_count == 0 || item.status == 3 ? 'b_g_violet1' : item.status == 1 ? 'b_g_gery1' : 'b_g_navy_blue']"></text>
						<text>课次{{ orderInfo.course_count == 0 ? '未预约' :item.status == 2?'未预约':item.status == 3 ?(item.is_start?'授课中':'未开始'): '已完成' }}</text>
						<text>{{ index+1 }}/{{ orderInfo.num }}</text>
					</view>
					<view class="dis-flex flex-x-between date">
						<block v-if="orderInfo.course_count != 0&&item.time!=''">
							<text>{{ item.date }}/{{ item.week }}</text>
							<text>{{ item.time }}</text>
						</block>
					</view>
				</view>
				</scroll-view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
import zanPopup from '@/components/popup/index.vue';
import { inverseAddressResolution } from '@/static/mixins/inverseAddressResolution.js';
import API from '@/static/api/index.js';
const app = getApp();
export default {
	components: {
		zanPopup
	},
	mixins: [inverseAddressResolution],
	data() {
		return {
			unSetData: true,
			orderInfo: {},
			orderId: 0, //订单ID
			scheduleList: [], //弹出的列表
			showCourse: false, //是否弹出课程列表
			isShowMore: true, //是否展示意向上课时间
			timeHeight: ['200rpx', '100%'],
			payIndex: 2,
			balance: 0 //余额
		};
	},
	onLoad(option) {
		app._log(option);
		this.orderId = option.orderId;
	},
	computed: {
		// 找出有预约过的课程
		courseList: function() {
			let { orderInfo } = this;
			app._log(orderInfo.hasOwnProperty('course') ? orderInfo.course.filter(o => o.date != ''):[])
			return orderInfo.hasOwnProperty('course') ? orderInfo.course.filter(o => o.date != ''): [];
		}
	},
	onShow() {
		this.getOrderDetail(this.orderId);
		// const query = uni.createSelectorQuery().in(this);
		// query.select('.time_list').boundingClientRect(data => {
		//   this.timeHeight = ['200rpx',(data.height*750 / uni.getSystemInfoSync().windowWidth)+'rpx'];
		this.isShowMore = false;
		// }).exec();
	},
	methods: {
		// 点击复制
		bindCopy(text) {
			uni.setClipboardData({
				data: text.toString(),
				success: res => {
					// this.showToast('复制成功');
				},
				catch: err => {
					this.showToast('复制失败，请手动复制');
				}
			});
		},
		// 点击联系学生
		bindConcat() {
			if(this.orderInfo.user!=null){
				uni.makePhoneCall({
					// phoneNumber: this.orderInfo.phone
						phoneNumber: this.orderInfo.user.mobile
				});
			}else{
				this.showToast('信息已过期')
			}
		},
		// 获取订单详情
		getOrderDetail(id, showLoading = true) {
			this.unSetData = true;
			API.getTeacherOrderRead(id, showLoading).then(res => {
				if (res.code == 1) {
					this.unSetData = false;
					app._log(res);
					this.orderInfo = res.data.order;
					setTimeout(() => {
						if (this.showCourseList) {
							uni.createSelectorQuery().in(this).select('.time_list').boundingClientRect(data => {
								let height = (data.height * 750) / uni.getSystemInfoSync().windowWidth;
								this.timeHeight = [(height > 200 ? 200 : height) + 'rpx', height + 'rpx'];
								this.isShowMore = false;
							}).exec();
						}
					}, 50);
				}
			});
		},

		closeCoursePopup(delay = 0) {
			setTimeout(() => {
				this.showCourse = !this.showCourse;
			}, delay);
		},
		// 点击课程预约记录列表
		bindShowMore() {
			this.isShowMore = !this.isShowMore;
		},
		// 点击顶部订单状态
		bindOrderStatus(num, course_count, id) {
			app._log(num, course_count, id);
			if(this.orderInfo.status==2){
				API.getTeacherCourseDegree(id).then(({code,data,msg})=>{
				 console.log(code,data,msg)
				 if(code==1){
				  this.scheduleList = data.course;
				  this.showCourse = true;
				 }else{
				  this.showCourse = false;
				 }
				})
			}
			// if (num == course_count) {
			// 	//课程全部被预约出去了
			// 	this.showCourse = true;
			// } else if (course_count > 0) {
			// 	//课程有约出去过
			// 	API.getTeacherCourseFinish(id).then(res => {
			// 		app._log(res);
			// 	});
			// } else {
			// 	//课程全部没有约过
			// 	this.showCourse = true;
			// }
		}
	}
};
</script>

<style lang="scss">
.address-box{
	position: relative;
	width: 654rpx;
	height: 194rpx;
	border-radius: 16rpx;
	margin: 0 48rpx 16rpx;
	.bg{
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	.address{
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
		image{
			width: 32rpx;
			height: 32rpx;
		}
		.title{
			padding: 16rpx 0;
			border-bottom: 1px solid rgba(146, 84, 255, 0.34);
		}
		.address_info{
			margin: 0 36rpx 0 16rpx;
			width: 442rpx;
			.username{
				margin-top: 10rpx;
			}
		}
		.box{
			padding: 18rpx 0 26rpx 0;
		}
	}
}
.mr6 {
	margin-right: 6rpx;
}
$purple: #7f4aff;
.purple {
	color: $purple;
}
.page {
	margin-bottom: calc(120rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
.icon {
	width: 40rpx;
	height: 40rpx;
}
.order_state {
	padding: 24rpx 48rpx;
	.order_state_title {
		margin-bottom: 8rpx;
	}
	.order_state_text {
		margin-right: 8rpx;
	}
}
.block_view {
	margin: 0 48rpx 16rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	.block_title {
		font-size: 32rpx;
		color: #252748;
		padding-bottom: 16rpx;
	}
	.course_info {
		display: flex;
		height: 144rpx;
		align-items: center;
		padding: 24rpx 0;
		border-top: 2rpx solid #f8f8f8;
		.course_img {
			width: 96rpx;
			height: 96rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 49, 183, 0.08);
			border-radius: 8rpx;
			border: solid 2rpx #ffffff;
		}
		.course_con_info {
			padding-left: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			.course_name {
				padding-bottom: 8rpx;
			}
			.course_num {
				.dot{
					margin: 0 10rpx;
				}
			}
		}
	}
	.block_list {
		border-top: 2rpx solid #f8f8f8;
		.list_item {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			&:first-child {
				margin-top: 16rpx;
			}
			&:not(:last-child) {
				margin-bottom: 24rpx;
			}
			.item_right {
				// max-width: 392rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: flex-end;
				& > view {
					text-align: right;
				}
			}
		}
	}
	.block_bottom{
		border-top: 2rpx solid #f8f8f8;
		padding-top: 12rpx;
		margin-top: 24rpx;
	}
	.no_time_list {
		padding: 26rpx 0 16rpx;
		border-top: 2rpx solid #f8f8f8;
		.booking_time {
			padding-right: 4rpx;
		}
	}
	.block_list_view {
		width: 606rpx;
		// height: 320rpx;
		background-color: rgba(236, 237, 250, 0.32);
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 26rpx;
		position: relative;
		.time_list {
			width: 100%;
			overflow: hidden;
			height: auto;
			transition: height 0.5s;
		}
		.time_item {
			line-height: 36rpx;
			&:not(:last-child) {
				margin-bottom: 8rpx;
			}
		}
		.get_more {
			margin-top: 24rpx;
			text-align: center;
		}
	}
	.content_list {
		display: flex;
		width: 606rpx;
		line-height: 88rpx;
		background-color: #ededf4;
		border-radius: 16rpx;
		&.m-t-24{
			margin-top: 24rpx;
		}
		view {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			image {
				margin-right: 4rpx;
			}
		}
	}
}
.copy {
	display: inline-block;
	width: 60rpx;
	text-align: center;
	line-height: 38rpx;
	background-color: #ffffff;
	border-radius: 4rpx;
	border: solid 1.2rpx rgba(143, 143, 154, 0.3);
	margin-left: 8rpx;
	color: #8f8f9a;
	font-size: 24rpx;
}
.is_bottom {
	line-height: 88rpx;
	text-align: center;
	font-size: 22rpx;
	color: #8f8f9a;
}
.schedule-list-box {
	width: 750rpx;
	background: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	height: 664rpx;
	// overflow-y: scroll;
	.li {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		position: relative;
	}
	.title {
		line-height: 92rpx;
		position: relative;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 48rpx;
			top: 30rpx;
		}  
	}
	.scroll_view{
		height: calc(564rpx - constant(safe-area-inset-bottom));
		height: calc(564rpx - env(safe-area-inset-bottom));
	}
	.color0 {
		color: #7f4aff;
	}
	.item {
		padding: 0 48rpx 42rpx 48rpx;
		.status-box {
			width: 35%;
		}
		.date {
			width: 60%;
		}
	}
}
.li::after {
	content: '';
	height: 75rpx;
	width: 10rpx;
	position: absolute;
	bottom: -75rpx;
	left: 2px;
}
.b_g_violet1::after {
	border-left: 1rpx dashed #7f4aff;
}
.b_g_gery1::after {
	border-left: 1rpx dashed #8f8f9a;
}
.b_g_navy_blue::after {
	border-left: 1rpx dashed #1f2633;
}
.item:last-of-type .li::after {
	content: '' !important;
	height: 0 !important;
	width: 0 !important;
}
</style>
